<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>公共模板</title>
	<link rel="stylesheet" href="assets/css/common.css">
	<link rel="stylesheet" href="assets/css/run-state.css">
	<link rel="stylesheet" href="assets/css/pidai.css">
</head>

<body>
	<div class="main-page page-run-state">
		<div class="page-body flex">
			<div class="sub-page-container">
				<div class="right-content-wrapper">
					<div class="right-content-box">
						<ul class="tags">
							<li class="to-back" onclick="javascript:history.back()">返回</li>
							<li>有组织</li>
							<li>&gt;</li>
							<li>皮带</li>
						</ul>
						<div class="table-clear">
							<div class="fl left">
								<div class="divlift">
									<p class="card-title">皮带通廊</p>
									<div class="shuzhi">
										<div>
											<canvas id="deviceTotal" width="120" height="100"></canvas>

										</div>
										<div>
											<canvas id="inlineNumber" width="120" height="100"></canvas>

										</div>
										<div>
											<canvas id="inlineRate" width="120" height="100"></canvas>

										</div>
									</div>
									<div class="jian">
										<div class="fl">
											<span class="imgspan"></span>
											<span>检测仪</span>
											<span>
												<b>62</b>
												/68
											</span>
										</div>
										<div class="fr">
											<span class="imgspan jiankong"></span>
											<span>监控设备</span>
											<span>
												<b>62</b>
												/68
											</span>
										</div>
									</div>
								</div>
								<div class="divbottom ">
									<p class="card-title">检测设备数据</p>
									<div class="table-box">
										<div class="left-box pdl-4 pdr-4">
											<table class="table">
												<thead>
													<tr>
														<th class="no">编号</th>
														<th class="date">位置</th>
														<th>粉尘灰</th>
														<th>时间</th>
													</tr>
												</thead>
												<tbody class="tbody" id="tbody">
													<tr>
														<td class="no">1</td>
														<td class="date">115#机头</td>
														<td>0.052</td>
														<td>10：18：12</td>
													
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
													
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
													
													</tr>
													<tr>
														<td class="no">1</td>
														<td class="date">2021-03-12</td>
														<td>道路</td>
														<td>4#干雾机</td>
														
													</tr>
												</tbody>
											</table>
										</div>
									
									</div>
								</div>
							</div>
							<div class="fr divright">
								<!-- <p class="card-title">皮带运作</p>
								<div class="yunxing posir">
									<div class="disinb shanpi posir">
										<img src="./assets/皮带_slices/编组5.png" class="shan" alt="山">
										<span class="mt-5 disinb">煤场</span>
										<div class="qu">
											<img src="./assets/皮带_slices/编组6备份.png" class="wan" alt="">
											<span>取料机</span>
										</div>
									</div>
									<span class="mt-5 disinb shu xian xia"></span>
									<div class="posir disinb shou">
										<span>受煤坑</span>
										<img src="./assets/皮带_slices/编组8(1).png" class="" alt="">
									</div>
									<span class="disinb ping heng hengxian"></span>
									<span class="disinb shu duanxia duanxi"></span>
									<div class="pidai posir">
										<span class="lun disinb"></span>
										<span>105</span>
										<span class="pi disinb">皮带</span>
										<span class="lun disinb xialun"></span>
									</div>
									<span class="disinb shu duanxia changxia"></span>
									<div class="pidai changpi posir">
										<span class="lun disinb"></span>
										<span style="display: inline-block;
										margin-top: calc(5px + 20px);">106</span>
										<span class="pi disinb">皮带</span>
										<span class="lun disinb xialun"></span>
									</div>
									<span class="disinb shu duanxia xiapi"></span>
									<div class=" posir duanpi">
										<span class="lun disinb"></span>
										<span>105</span>
										<span class="pi disinb">皮带</span>
										<span class="lun disinb xialun"></span>
									</div>
									<span class="disinb shu duanxia xiapi xiapi-di"></span>
									<div class="jifen">
										<div>710粉碎机</div>
										<div>1250粉碎机</div>
									</div>
									<span class="disinb ping heng heng-zuo posir"></span>
									<span class="disinb shu duanxia sxshang"></span>
									<span class="mt-5 disinb shu sxxia xia"></span>
									<span class="disinb ping heng heng-zuo-shang posir"></span>
								</div> -->
							</div>
						</div>
					</div>
					<span class="close-btn"></span>
				</div>
			</div>
		</div>
	</div>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
	<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
	<script src="assets/js/semicircle.js"></script>
	<script src="assets/js/page.js"></script>
	<script>
		var pageObj = function () {
			this.init()

			// 渲染底部菜单
			new Footer({
				el: ".main-page",
				curMenu: "清洁运输",
				size: 4,
				menus: [{
						href: "有组织.html",
						text: "有组织"
					},
					{
						href: "无组织.html",
						text: "无组织"
					},
					{
						href: "车辆出入.html",
						text: "清洁运输"
					},
					{
						href: "视频.html",
						text: "视频大厅"
					}
				]
			});

			// 渲染左侧菜单树
			new LeftSiderMenu({
				el: ".sub-page-container",
				size: 10,
				curMenu: "运行状态",
				menus: [{
						href: "首页.html",
						text: "首页"
					},
					{
						href: "排放清单.html",
						text: "实时监测"
					},
					{
						href: "数据分析.html",
						text: "数据分析"
					},
					{
						href: "告警分析.html",
						text: "告警分析"
					},
					{
						href: "运行状态.html",
						text: "运行状态"
					}
				]
			});
		}
		pageObj.prototype.init = function () {
			this.bindEvent();
		}
		pageObj.prototype.bindEvent = function () {
			let self = this;

			new Semicircle({
				el: "#deviceTotal",
				rate: 100,
				linearColor: ['rgba(17, 93, 185, 1)', 'rgba(64, 255, 206, 1)'],
				name: "设备总量",
				nameColor: "rgba(255, 255, 255, 1)",
				rateColor: "rgba(255, 255, 255, 1)",
				nameFontSize: 12,
				lineWidth: 5,
				lineHeight: 3,
				nameBottom: 2,
				lineMargin: 0,
			});

			new Semicircle({
				el: "#inlineNumber",
				rate: 25,
				linearColor: ['rgba(11, 102, 254, 1)', 'rgba(67, 71, 212, 1)'],
				name: "在线量",
				nameColor: "rgba(255, 255, 255, 1)",
				rateColor: "rgba(255, 255, 255, 1)",
				nameFontSize: 12,
				lineWidth: 5,
				lineHeight: 3,
				nameBottom: 2,
				lineMargin: 0,
			});

			new Semicircle({
				el: "#inlineRate",
				rate: 50,
				name: "离线设备",
				nameColor: "rgba(255, 255, 255, 1)",
				linearColor: ['rgba(186, 56, 121, 1)', 'rgba(172, 11, 126, 1)'],
				baseCircleColor: "RGBA(65, 43, 99, 1)",
				rateColor: "rgba(255, 255, 255, 1)",
				nameFontSize: 12,
				lineWidth: 5,
				lineHeight: 3,
				nameBottom: 2,
				lineMargin: 0,
			});
		}
		new pageObj();
	</script>
</body>

</html>